<template>
  <div class="editor-nav" :class="{'editor-nav-active':data.active}" v-bind:style="data.style" @click="exposetop($event,data.selfindex)">
      <div class="editor-nav-list" v-for="(item,index) in data.datalist" @click="active=index" v-if="item.show">
          <div class="editor-nav-img"><i :style="{color:active==index?data.color:'#000'}" :class="item.on"></i></div>
          <div class="editor-nav-titles">{{item.title}}</div>
      </div>
      <the-asscon :active="data.active" @control="control"/>
  </div>
</template>

<script>
import TheAsscon from "@/components/assCon"
import { setInterval } from 'timers';
export default {
  props:{
    data:{
      type:Object,
      default:()=>{
        return{
          active:true,
          datalist:[],
          title:"这里是标题",
          style:{
            height:"200px"
          }
        }
      }
    }
  },
  name: 'ad',
  data () {
    return {
      active:0,
      index:0,
      msg: '广告  暂时分为轮播和单张展示两种'

    }
  },
  mounted(){
     
  },
  methods:{
    control(e){
      //1向上 2向下 3删除
      if(e==3){
    var data ={
          type:e,
          index:this.data.selfindex
      }
        this.$emit("on-contro",data)
      }
    
    },
    exposetop(e,selfindex){
        this.$emit("queryTop",  {
         offsetTop:e.currentTarget.offsetTop,
         selfindex:selfindex
      })
    }
  },
    components:{
     TheAsscon,
    }
}
</script>
<style scoped>
@import url(../assets/icon.css);
.icons{
    text-align: left;
}
.icons-item{
    display: inline-block;
    width: 100px;
    text-align: center;
    margin: 10px;
    cursor: pointer;
}
.i-icon{
    font-size: 20px;
}
</style>